<script setup lang="ts">
import { loginAPI } from '@/apis/user';
import type { FormInstance } from 'element-plus';
import { onMounted, ref } from 'vue';
import { useUserStore } from '@/stores/user';
import router from '@/router';
import Cookies from 'js-cookie';
import { REMEMBER_ME } from '@/constants';

/* 
实现校验的逻辑：
1. 定义校验的数据
2.定义校验的规则
3.给el-form进行 绑定
4.给el-form-item进行prop进行数据的绑定
5.给el-input使用v-model进行数据的双向绑定

点击按钮时进行整体的校验
1.创建form实例对象
2.通过实例对象调用vlidate方法进行整体校验
*/

const formData = ref({
  username: '',
  password: '',
  rememberMe: false
})

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    // 用户名长度在3-11之间
    { min: 3, max: 11, message: '用户名长度在3-11之间', trigger: 'blur' }
  ],
  password: [
    { required: true, message: ' 请输入密码', trigger: 'blur' },
    // 密码长度在6-16之间
    { pattern: /^[a-zA-Z0-9%]{6,16}$/, message: '密码长度在6-16之间', trigger: 'blur' }
  ]
}

// 创建 form实例对象
const form = ref<FormInstance>()

const userStore = useUserStore()

// 用户名: demo
// 密码:  Hmzs%001
onMounted(() => {
  // 首先获取存储的账号和密码
  const rememberMeDataStr = localStorage.getItem(REMEMBER_ME)
  console.log('rememberMeDataStr', rememberMeDataStr);
  
  if (rememberMeDataStr !== null) {
    const rememberMeDataObj = JSON.parse(rememberMeDataStr)
    console.log('rememberMeDataObj', rememberMeDataObj);
  
    formData.value = rememberMeDataObj
  }

})
//登录函数
const loginFn = async () => {
  await form.value!.validate()
  console.log(' 登录成功');
  const { username, password } = formData.value
  const res = await loginAPI({ username, password })
  /* 
    [目标]：数据回填，当点击 记住我 时的触发
    [思路]：
    1.确定触发的时机 ——> 当发送请求成功之后
    2.判断是否勾选了 记住我 
      2.1 是：将数据存储到 localStorage / cookie 中
      2.2 在 onMounted 中，从 localStorage / cookie 中获取数据，回填到 formData 中
  */
  if (formData.value.rememberMe) {
    // Cookies.set(REMEMBER_ME,JSON.stringify(formData.value))
    localStorage.setItem(REMEMBER_ME, JSON.stringify(formData.value))
  }
  console.log(res);
  userStore.setToken(res.data.token)
  router.push('/')


}
</script>

<template>
  <div class="login_body">
    <div class="bg" />
    <div class="box">
      <div class="title">智慧园区-登录</div>
      <el-form ref="form" :model="formData" :rules="rules">
        <el-form-item label="账号" prop="username">
          <el-input v-model="formData.username" />
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="formData.password" type="password" />
        </el-form-item>

        <el-form-item>
          <el-checkbox v-model="formData.rememberMe">记住我</el-checkbox>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" class="login_btn" @click="loginFn">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login_body {
  display: flex;
}

.bg {
  width: 60vw;
  height: 100vh;
  background: url("@/assets/login-bg.svg") no-repeat;
  background-position: right top;
  background-size: cover;
}

.box {
  margin: 200px 10% 0;
  flex: 1;

  .title {
    padding-bottom: 76px;
    font-size: 26px;
    font-weight: 500;
    color: #1e2023;
  }

  ::v-deep() {
    .ant-form-item {
      display: flex;
      margin-bottom: 62px;
      flex-direction: column;
    }

    .ant-form-item-label label {
      font-size: 16px;
      color: #8b929d;
    }

    .ant-input,
    .ant-input-password {
      border-radius: 8px;
    }
  }
}

.login_btn {
  width: 100%;
}
</style>
